import React, { useState } from 'react';
import useCityReducer from '../Reducer/index';
import { NavLink } from 'react-router-dom';
const Index = () => {
    const [cities] = useState(['上海', '杭州', '深圳', '西安'])
    const { state, dispatch } = useCityReducer();
    const handleCity = (item) => {
        dispatch({
            type: "changeCity",
            val: item
        })
    }
    return (
        <div>
            <p>{state.city}</p>
            {cities.map(item => {
                return (
                    <NavLink to='/'>
                        <div key={item} onClick={() => handleCity(item)}>
                        <button>{item}</button>
                    </div>
                    </NavLink>
                )
            })}
        </div>
    );
}

export default Index;
